<template>
  <div class="login">
    <Header></Header>
    <div class="main">
      <cube>
        <side></side>
        <side></side>
        <side></side>
        <side></side>
        <side></side>
        <side></side>
      </cube>
      <!-- 短信登陆页面 -->
      <div class="loginpage" v-if="power == 0">
        <h1>Login</h1>

        <input
          type="text"
          v-model="phone"
          @blur="checkPhone"
          placeholder="手机号"
          pattern="[0-9]*"
        />

        <div class="msginput">
          <input
            type="text"
            v-model="code"
            pattern="[0-9]*"
            placeholder="验证码"
          />
          <div class="send" :disabled="disabled" @click="sendCode">
            {{ codeMsg }}
          </div>
        </div>
        <button @click="login">登录</button>
        <div class="footer">
          <p @click="changeRegister">注册</p>
          <p @click="changePasswordLogin">密码登录</p>
          <p @click="changeUserFaceLogin">人脸登录</p>
          <p @click="changePasswordFix">忘记密码</p>
        </div>
      </div>
      <!-- 注册页面 -->
      <div class="loginpage" v-if="power == 1">
        <h1>
          <span @click="goLoginPage">
            <van-icon name="arrow-left" size="30px"
          /></span>
          register
        </h1>

        <input
          type="text"
          v-model="phone"
          @blur="checkPhone"
          placeholder="手机号"
          pattern="[0-9]*"
        />

        <div class="msginput">
          <input
            type="text"
            v-model="code"
            pattern="[0-9]*"
            placeholder="验证码"
          />
          <div
            class="send"
            :disabled="registerDisabled"
            @click="registerSendCode"
          >
            {{ resgisterCodeMsg }}
          </div>
        </div>

        <input
          type="password"
          v-model="onepassword"
          @blur="checkPassword"
          placeholder="密码"
        />
        <input
          type="password"
          v-model="twopassword"
          @blur="checkTwoPassword"
          placeholder="确认密码"
        />
        <button @click="register">注册</button>
      </div>
      <!-- 密码登录界面 -->
      <div class="loginpage" v-if="power == 2">
        <h2 class="back" @click="goLoginPage">
          <van-icon name="arrow-left" />
        </h2>
        <h1>Login</h1>

        <input
          type="text"
          v-model="phone"
          @blur="checkPhone"
          placeholder="手机号"
          pattern="[0-9]*"
        />

        <div class="msginput">
          <input type="password" v-model="inputpassword" placeholder="密码" />
        </div>
        <button @click="passwordLogin">登录</button>
      </div>

      <!-- 修改密码登录界面 -->
      <div class="loginpage" v-if="power == 3">
        <h2 class="back" @click="goLoginPage">
          <van-icon name="arrow-left" />
        </h2>
        <h1>Forget</h1>

        <div class="msginput">
          <input
            type="text"
            v-model="phone"
            @blur="checkPhone"
            placeholder="手机号"
            pattern="[0-9]*"
          />

          <div class="msginput">
            <input
              type="text"
              v-model="code"
              pattern="[0-9]*"
              placeholder="验证码"
            />
            <div
              class="send"
              :disabled="fixPasswordDisabled"
              @click="sendCodepasswordFix"
            >
              {{ fixPasswordCodeMsg }}
            </div>
          </div>
          <input
            type="password"
            v-model="inputNewPassword"
            @blur="checkPassword"
            placeholder="重置密码"
          />
        </div>
        <button @click="passwordFix">修改</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant"
import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
import validate from "@/validate"
import Header from "@/views/Login/Header"

export default {
  name: "login",

  components: {
    Header,
  },
  data() {
    return {
      phone: "",
      code: "",
      returnCode: "",
      status: "",
      codeMsg: "获取",
      disabled: false,
      CodeNum: 60,
      resgisterCodeMsg: "获取",
      registerDisabled: false,
      registerCodeNum: 60,
      fixPasswordCodeMsg: "获取",
      fixPasswordDisabled: false,
      fixPasswordCodeNum: 60,
      power: 0,
      onepassword: "",
      twopassword: "",
      inputpassword: "",
      inputNewPassword: "",
    }
  },
  methods: {
    ...mapMutations(["userLogin"]),
    onSubmit(values) {
      console.log("submit", values)
    },

    // 校验号码格式
    checkPhone() {
      if (validate.checkMobile(this.phone || this.Forgrtphone)) {
        return
      } else {
        Toast.fail("手机号格式错误")
      }
    },

    goLoginPage() {
      this.power = 0
      this.phone = ""
      this.code = ""
      this.inputNewPassword = ""
    },

    changeRegister() {
      this.power = 1
    },
    changePasswordLogin() {
      this.power = 2
    },
    changePasswordFix() {
      this.power = 3
    },

    changeUserFaceLogin() {
      this.$router.push("/face")
    },

    // 登录发送验证码
    sendCode() {
      if (!validate.checkMobile(this.phone)) {
        Toast("请正确输入号码")
        return
      } else {
        let params = { phone: this.phone }
        if (!this.disabled) {
          this.$api.user.sendMessageCode(params).then((res) => {
            if (res.code == 301) return
            // 获取短信成功
            Toast("获取短信成功")
            this.returnCode = res.data.code[0]
            // 禁用按钮
            this.disabled = true
            let timer = setInterval(() => {
              --this.CodeNum
              this.codeMsg = `重发${this.CodeNum}`
            }, 1000)

            // 判断什么时候停止定时器
            setTimeout(() => {
              clearTimeout(timer)
              this.CodeNum = 60
              this.disabled = false
              this.codeMsg = "获取"
            }, 60000)
          })
        }
      }
    },
    // 注册发送验证码
    registerSendCode() {
      if (!validate.checkMobile(this.phone)) {
        Toast("请正确输入号码")
        return
      } else {
        let params = { phone: this.phone }
        if (!this.registerDisabled) {
          this.$api.user.sendMessageCode(params).then((res) => {
            if (res.code == 301) return
            // 获取短信成功
            Toast("获取短信成功")
            this.returnCode = res.data.code[0]
            // 禁用按钮
            this.registerDisabled = true
            let timer = setInterval(() => {
              --this.registerCodeNum
              this.resgisterCodeMsg = `重发${this.registerCodeNum}`
            }, 1000)

            // 判断什么时候停止定时器
            setTimeout(() => {
              clearTimeout(timer)
              this.registerCodeNum = 60
              this.registerDisabled = false
              this.resgisterCodeMsg = "获取"
            }, 60000)
          })
        }
      }
    },
    // 忘记密码发送验证码
    sendCodepasswordFix() {
      if (!validate.checkMobile(this.phone)) {
        Toast("请正确输入号码")
        return
      } else {
        let params = { phone: this.phone }
        if (!this.fixPasswordDisabled) {
          this.$api.user.sendMessageCode(params).then((res) => {
            if (res.code == 301) return
            // 获取短信成功
            Toast("获取短信成功")
            this.returnCode = res.data.code[0]
            // 禁用按钮
            this.fixPasswordDisabled = true
            let timer = setInterval(() => {
              --this.fixPasswordCodeNum
              this.fixPasswordCodeMsg = `重发${this.fixPasswordCodeNum}`
            }, 1000)

            // 判断什么时候停止定时器
            setTimeout(() => {
              clearTimeout(timer)
              this.fixPasswordCodeNum = 60
              this.fixPasswordDisabled = false
              this.fixPasswordCodeMsg = "获取"
            }, 60000)
          })
        }
      }
    },

    // 检查密码格式
    checkPassword() {
      validate.checkPassword(this.onepassword)
    },
    // 判断两次密码是否一致
    checkTwoPassword() {
      validate.checkTwoPassword(this.onepassword, this.twopassword)
    },

    // 注册
    register() {
      if (!(this.phone && this.code && this.onepassword && this.twopassword))
        return
      if (this.code != this.returnCode) {
        Toast("验证码错误")
        return
      } else {
        let params = { phone: this.phone, password: this.twopassword }
        this.$api.user.register(params).then((res) => {
          console.log(res)
          if (res.status == 407) {
            Toast("账号已注册")
          } else {
            Toast("注册成功")
            this.phone = ""
            this.code = ""
            this.power = 0
          }
        })
      }
    },

    // 密码登录
    passwordLogin() {
      if (!(this.phone && this.inputpassword)) {
        return
      } else {
        let params = { phone: this.phone, password: this.inputpassword }
        this.$api.user.passwordLogin(params).then((res) => {
          console.log(res)

          switch (res.status) {
            case 412:
              if (res.data[0].user_status == 0) {
                Toast("你已经被封禁")
                return
              }
              this.userLogin(res)
              this.$router.push("/my")
              break
            case 406:
              Toast(res.msg)
              break
            case 418:
              Toast(res.msg)
              break
          }
        })
      }
    },

    // 短信登录
    async login() {
      // 判断是否输入号码和验证码
      if (!(this.phone && this.code)) {
        return
      } else {
        //  所有输入都成功
        if (this.code == this.returnCode) {
          // 判断验证码输入成功。登录逻辑
          let params = { phone: this.phone }
          this.$api.user.login(params).then((res) => {
            console.log(res)
            this.status = res.status
            // 账号未注册
            if (this.status == 405) {
              Toast("账号未注册")
              return
            } else {
              this.userLogin(res)
              this.$router.push("/my")
            }
          })
        } else {
          Toast("验证码输入错误")
          return
        }
      }
    },
    // 密码修改
    passwordFix() {
      // 判断是否都输入
      if (!(this.phone && this.code && this.inputNewPassword)) {
        return
      } else {
        let params = { phone: this.phone, password: this.inputNewPassword }
        if (!(this.code == this.returnCode)) {
          Toast("验证码不正确")
          return
        }
        if (validate.checkPassword(this.inputNewPassword) === true) {
          this.$api.user.forgetPassword(params).then((res) => {
            console.log(res)
            Toast("更新密码成功")
            res.status == 200 ? Toast("更新密码成功") : Toast("更新密码失败")
          })
        } else {
          Toast("密码格式错误")
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.login {
  position: relative;
  width: 100vw;
  height: 100vh;
}
cube {
  --s: 15.1875rem /* 243/16 */;
  --hs: calc(var(--s) / 2);
  display: block;
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
  will-change: transform;
  animation: r 15s linear infinite;
}

side {
  position: absolute;
  width: 100%;
  height: 100%;

  --sq: conic-gradient(
    from 270deg at calc(100% / 3) calc(100% / 3),
    #fff 90deg,
    transparent 0
  );

  background: var(--sq) calc(var(--s) / 3) calc(var(--s) / 3) / 100% 100%,
    var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 3) calc(100% / 3),
    var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 9) calc(100% / 9),
    var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 27) calc(100% / 27),
    var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 81) calc(100% / 81);

  background-color: #000;
  background-blend-mode: difference;
}

side:nth-child(1) {
  transform: translateZ(var(--hs));
}
side:nth-child(2) {
  transform: translateZ(calc(-1 * var(--hs)));
}
side:nth-child(3) {
  transform: rotateY(90deg) translateZ(var(--hs));
}
side:nth-child(4) {
  transform: rotateY(-90deg) translateZ(var(--hs));
}
side:nth-child(5) {
  transform: rotateX(90deg) translateZ(var(--hs));
}
side:nth-child(6) {
  transform: rotateX(-90deg) translateZ(var(--hs));
}

@keyframes r {
  100% {
    transform: rotateX(1turn) rotateY(1turn) rotateZ(1turn);
  }
}

.msginput {
  overflow: hidden;
  position: relative;
}

.send {
  position: absolute;
  float: left;
  right: 0;
  top: 0.625rem /* 10/16 */;
  width: 3.375rem /* 54/16 */ /* 50/16 */;
  border: 1px solid #fff;
  background-image: linear-gradient(45deg, #d3959b, #bfe6ba);
  text-align: center;
  border-radius: 1.25rem /* 20/16 */;
}

.sendcode {
  position: absolute;
  width: 3.375rem /* 54/16 */ /* 50/16 */;
  border: 1px solid #fff;
  background-image: linear-gradient(45deg, #d3959b, #bfe6ba);
  text-align: center;
  right: 3.4375rem /* 55/16 */;
  margin-top: 0.625rem /* 10/16 */;
  border-radius: 1.25rem /* 20/16 */;
}
.back {
  position: relative;
  width: 100%;
  padding-left: 2.5rem /* 40/16 */ /* 5/16 */;
}

.footer {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 1.875rem /* 30/16 */;
}
.footer p {
  padding: 12px 0px;
  margin: 10px 0px;
  font-size: 14px;
}

// .footer p:nth-child(1) {
//   float: left;
// }

// .footer p:nth-child(2) {
//   float: right;
// }

.main {
  margin: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  perspective: 1000px;
}

.main:after {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 50% 50%, #ff9800 1%, #673ab7);
  width: 100%;
  height: 100%;
  mix-blend-mode: lighten;
}

section {
  position: relative;
  height: 100vh;
  width: 100vw;
  z-index: 0;
  /* 背景颜色 */
  background-image: url(@/assets/Login/snow2.jpeg);
  // background: #201b1a;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}

.loginpage {
  /* 超出部分隐藏 */
  overflow: hidden;
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 18.75rem /* 300/16 */ /* 100/16 */;
  height: 18.75rem /* 300/16 */ /* 150/16 */ /* 100/16 */;
  transform: translate(-50%, -50%);
  top: 40vh;
  left: 50vw;
  background-color: rgba(255, 255, 255, 0.36);
  border-radius: 10px;
  box-shadow: 10px 10px 20px rgba(33, 44, 55, 0.3);
}
h1 {
  font-size: 45px;
  font-weight: 400;
  /* 提高层级 */
  z-index: 1;
}
form {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 230px;
  /* 提高层级 */
  z-index: 1;
}
input {
  width: 200px;
  height: 40px;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #eee;
  font-size: 16px;
  outline: none;
}
input::placeholder {
  font-size: 1.125rem /* 18/16 */;
  color: black;
}
button {
  margin-top: 1.25rem /* 20/16 */ /* 10/16 */;
  width: 180px;
  height: 36px;
  border: 1px solid #eee;
  background-image: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);
  border-radius: 18px;
  background-color: transparent;
  font-size: 1.125rem /* 18/16 */;
  cursor: pointer;
}
span {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background-color: #916968;
  /* 鼠标居中 */
  transform: translate(-50%, -50%);
  /* 圆的形式展开 */
  border-radius: 50%;
}

/* 鼠标进入 login 时的动画 */
@keyframes in {
  0% {
    width: 0;
    height: 0;
  }
  100% {
    width: 1200px;
    height: 1200px;
  }
}

/* 鼠标离开 login 时的动画 */
@keyframes out {
  0% {
    width: 1200px;
    height: 1200px;
  }
  100% {
    width: 0;
    height: 0;
  }
}

Header {
  position: sticky;
  top: 0px;
  // z-index: inherit;
}
</style>
